<template>
    <view class="page">
        <template v-if="loginType!='teacher'">
            <div class="container_flex column mine_box  padding_box">
                <div class="u-flex">
                    <u-avatar class="avatar-img"
                              :size="150"
                              :src="userInfo.icon"
                              mode="circle"></u-avatar>
                    <!-- <open-data class="avatar-img"
                               type="userAvatarUrl"></open-data> -->
                    <div class="nick-name-box u-flex-col">
                        <view class="user-nickName">{{ userInfo.nickName }}</view>
                        <!-- <open-data class="user-nickName"
                                   type="userNickName"></open-data> -->
                        <div class="u-flex ">
                            <div @click="loginTest"
                                 class="shiming_box u-flex u-col-center">
                                <i class="iconfont icon-shezhi"></i>
                                个人信息
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <scroll-view class="children_box "
                         :scroll-left='scleft'
                         scroll-with-animation
                         show-scrollbar="false"
                         scroll-x>
                <view class="u-flex u-row-between">
                    <view class="children_item u-flex"
                          @click="itemClick(item, index)"
                          v-for="(item, index) in childrenList"
                          :key="index">
                        <image class="children_img"
                               :src="!item.gender ? '/static/images/mine/coommon_icon_boy01@2x.png':'/static/images/mine/coommon_icon_girl01@2x.png'"
                               mode="" />
                        <view class="u-flex-col u-row-between">
                            <view class="title">{{ item.childrenName }}</view>
                            <view class="address_teacher_box u-flex">
                                <view>{{ item.schoolName }}</view>
                                <view class="line"></view>
                                <view>{{ item.childrenClass }}</view>
                            </view>
                        </view>
                        <view v-if="!item.defStatus"
                              @click="switchChildren(item)"
                              class="user_box">使用TA</view>
                        <view v-else
                              class="select_box">使用中</view>
                    </view>
                </view>
            </scroll-view>
            <div class="padding_box">
                <div class="mine_menu">
                    <div class="menu_box">
                        <div class="item_box u-flex-col u-col-center click-hover"
                             v-for="(item,index) in menuList"
                             :key="index"
                             @click="$goto('push',item.pageUrl)">
                            <image class="item_img"
                                   :src="item.imgUrl"
                                   mode="" />
                            <p class="menu_title">{{ item.name }}</p>
                        </div>
                    </div>
                </div>
                <div class="menu_bar_box">
                    <div class="mine_item_box u-flex u-col-center u-row-between"
                         v-for="(item,index) in barMenuList"
                         @click="barMenuClick(item)"
                         :key="index">
                        <view class="left_box u-flex ">
                            <image class="item_img"
                                   :src="item.imgUrl"
                                   mode="" />
                            <p class="menu_title">{{ item.name }}</p>
                        </view>

                        <image class="more_img"
                               src="/static/images/mine/mine_more_hui@2x.png"
                               mode="" />

                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="container_flex column mine_box  padding_box">
                <div style="margin-top:50rpx;"
                     class="u-flex ls-f-ac">
                    <u-avatar class="avatar-img"
                              :size="150"
                              :src="userInfo.icon"
                              mode="circle"></u-avatar>
                    <div class="nick-name-box u-flex-col">
                        <view class="user-nickName">{{ userInfo.nickName }}</view>
                    </div>
                </div>
            </div>
            <scroll-view class="children_box "
                         :scroll-left='scleft'
                         scroll-with-animation
                         show-scrollbar="false"
                         scroll-x>

            </scroll-view>
            <div class="padding_box">
                <div class="mine_menu ">
                    <div class="menu_box box1">
                        <div class="item_box box2"
                             v-for="(item,index) in teacherLabelList"
                             :key="index"
                             @click="$goto('push',item.pageUrl)">
                            <image class="item_img"
                                   :src="item.imgUrl"
                                   mode="" />
                            <p class="menu_title">{{ item.name }}</p>
                        </div>
                    </div>
                </div>
                <div class="menu_bar_box">
                    <div class="mine_item_box u-flex u-col-center u-row-between"
                         v-for="(item,index) in teacherBarMenuList"
                         @click="barMenuClick(item)"
                         :key="index">
                        <view class="left_box u-flex ">
                            <image class="item_img"
                                   :src="item.imgUrl"
                                   mode="" />
                            <p class="menu_title">{{ item.name }}</p>
                        </view>
                        <!-- <u-switch v-if="item.name == '上课提醒'"
      		                      @change="subscribeMessage"
      		                      v-model="remind"
      		                      :loading="loading"></u-switch> -->
                        <image class="more_img"
                               src="/static/images/mine/mine_more_hui@2x.png"
                               mode="" />
                        <!-- <button v-if="item.name == '联系客服'"
      		                    class="contact_btn"
      		                    open-type="contact"></button> -->
                    </div>
                </div>
            </div>

        </template>

        <official-account @load="load"
                          @error="error"></official-account>
        <u-popup v-model="showCustomerQrCode"
                 width="80%"
                 mode="center">
            <view class="customer_box">
                <view class="title">{{ isCustomer ? '保存后扫码添加客服':'保存后扫码关注公众号接收提醒' }}</view>
                <image class="customer_code"
                       :src="isCustomer ? currentChildrenData.customerService : require('@/static/qrode.jpg')"
                       mode="" />
                <u-button @click="saveImage"
                          type="primary"
                          :ripple="true"
                          shape="circle"> 保存到手机 </u-button>
            </view>
        </u-popup>

        <u-tabbar :show="loginType == 'parent'"
                  active-color="#63B9F2"
                  :list="parentList"></u-tabbar>
        <u-tabbar :show="loginType == 'teacher'"
                  active-color="#63B9F2"
                  :list="teacherList"></u-tabbar>
    </view>
    <!-- <image src="../../static/images/mine_icon_qjdk@3x.png" mode=""></image> -->
</template>

<script>
export default {
    data() {
        return {
            // 用户基本信息
            userInfo: {},
            // 微信,支付宝用户code
            code: '',
            // 是否弹出登录注册授权弹窗
            showAuthorize: false,
            loginType: '',
            menuList: [
                { name: '我的订单', pageUrl: '/pages/orderList/orderList?status=' + '', imgUrl: require('@/static/images/mine/mine_icon_indent@2x.png'), },
                { name: '已完成', pageUrl: '/pages/orderList/orderList?status=' + 1000, imgUrl: require('@/static/images/mine/mine_icon_use@2x.png'), },
                { name: '退课中', pageUrl: '/pages/orderList/orderList?status=' + 70, imgUrl: require('@/static/images/mine/mine_icon_refund@2x.png'), },
                // { name: '请假中心', pageUrl: '/pages/leaveCenter/leaveHistory', imgUrl: require('@/static/images/mine/mine_icon_refund@2x.png'), },
            ],
            barMenuList: [
                { name: '上课提醒', pageUrl: '', imgUrl: require('@/static/images/mine/mine_icon_remind@2x.png'), },
                // { name: '课程成果', pageUrl: '', imgUrl: require('@/static/images/mine/mine_icon_kccg@2x.png'), },
                { name: '请假记录', pageUrl: '/pages/leaveCenter/leaveHistory', imgUrl: require('@/static/images/mine/mine_icon_qj.png'), },
                { name: '联系客服', pageUrl: '', imgUrl: require('@/static/images/mine/mine_icon_kf@2x.png'), },
            ],
            teacherBarMenuList: [
                { name: '上课提醒', pageUrl: '', imgUrl: require('@/static/images/mine/mine_icon_remind@2x.png'), },
                { name: '联系客服', pageUrl: '', imgUrl: require('@/static/images/mine/mine_icon_kf@2x.png'), },
            ],
            teacherLabelList: [
                { name: '考勤打卡', pageUrl: '../teacherPackage/check/check?status=' + '', imgUrl: require('@/static/images/mine_icon_kqdk@3x.png'), },
                { name: '工作记录', pageUrl: '../teacherPackage/work/list?status=' + 1000, imgUrl: require('@/static/images/mine_icon_gzjl@3x.png'), },
                { name: '考勤代课', pageUrl: '../teacherPackage/leave/list?status=' + 70, imgUrl: require('@/static/images/mine_icon_qjdk@3x.png'), },
                { name: '课时统计', pageUrl: '../teacherPackage/courseCount/index?status=' + 70, imgUrl: require('@/static/images/mine_icon_kstj@3x.png'), },

            ],
            parentList: [
                {
                    pagePath: "/pages/index/index",
                    iconPath: "/static/images/nav_icon_sy_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_sy_sel@2x.png",
                    text: "首页"
                },
                {
                    pagePath: "/pages/timeimagesles/timeimagesles",
                    iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
                    text: "课程表"
                },
                {
                    pagePath: "/pages/mine/mine",
                    iconPath: "/static/images/nav_icon_wd_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
                    text: "我的"
                },
            ],
            teacherList: [
                {
                    pagePath: "/pages/timeimagesles/timeimagesles",
                    iconPath: "/static/images/nav_icon_kcb_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_kcb_sel@2x.png",
                    text: "课程表"
                },
                {
                    pagePath: "/pages/mine/mine",
                    iconPath: "/static/images/nav_icon_wd_nor@2x.png",
                    selectedIconPath: "/static/images/nav_icon_wd_sel@2x.png",
                    text: "我的"
                },
            ],
            childrenList: [
                // { id: 1, name: '冯杰', school: '希望小学', class: '一年一班', sex: 0, current: true, }, { id: 1, name: '冯杰', school: '希望小学', class: '一年一班', sex: 1, },
                // { id: 1, name: '冯杰', school: '希望小学', class: '一年一班', sex: 0, }, { id: 1, name: '冯杰', school: '希望小学', class: '一年一班', sex: 0, },
            ],
            scleft: 0,
            remind: false,
            loading: false,
            controlStatus: false,
            showCustomerQrCode: false,
            currentChildrenData: {},
            isCustomer: false,
        }
    },
    filters: {
    },
    watch: {
    },
    /* 下拉刷新 */
    onPullDownRefresh() {
        let _this = this
        setTimeout(() => {
            if (_this.loginType == 'parent') {
                _this.getChildren()
            } else {
                this.init();
            }
        }, 500);
    },
    onShow() {
        if (this.loginType == 'parent') {
            this.getChildren()
            this.currentChildren()
        } else {
            this.init();
        }
    },
    onLoad() {
        this.loginType = uni.getStorageSync('loginType')
        this.userInfo = uni.getStorageSync('userInfo')
    },
    onShareAppMessage: function (res) {
    },
    methods: {
        init() {
            this.$api.getTeacherInfo({}, res => {
                this.teacher = res.data
                this.$api.getschoolInfo({ getid: res.data.schoolId }, res => {
                    // this.teacher = res.data
                    this.currentChildrenData = res.data

                })
            })

        },
        loginTest() {
            if (this.userInfo && this.userInfo.icon) {
                this.$goto('push', '/pages/personal/personal')
            } else {
                // 获取用户信息
                uni.getUserProfile({
                    lang: 'zh_CN',
                    desc: '登录',
                    success: (infoRes) => {
                        console.log('-------------用户昵称为：', infoRes.userInfo.avatarUrl);
                        console.log('-------------用户昵称为：', infoRes.userInfo);
                        if (!this.userInfo) {
                            this.userInfo = {}
                        }
                        this.userInfo.icon = infoRes.userInfo.avatarUrl
                        this.userInfo.nickName = infoRes.userInfo.nickName
                        uni.setStorageSync('userInfo', this.userInfo)

                        let data = {
                            icon: this.userInfo.icon,
                            nickName: this.userInfo.nickName
                        }
                        this.$api.setIconNickname(data, res => {
                        });
                        // this.isLoginPopup = false
                        this.$goto('push', '/pages/personal/personal')
                    },
                    fail: (res) => {
                        console.log(res)
                    }
                });
            }

        },
        load(e) {
            console.log('###>>>>>>>>>>>>>>>>>', e.detail)
        },
        error(e) {
            console.log('###>>>>>>>>>>>>>>>>>', e.detail)
        },
        barMenuClick(item) {
            if (item.name == '课程成果') {
                return this.$interactive.toast('敬请期待')
            } else if (item.name == '上课提醒') {
                this.isCustomer = false
                this.showCustomerQrCode = true
            } else if (item.name == '联系客服') {
                this.isCustomer = true
                this.showCustomerQrCode = true
            } else {
                this.$goto('push', item.pageUrl)
            }
        },
        itemClick(item, index) {
            if (index > 0) {
                this.scleft = index * this.$systemInfo.windowWidth * (540 / 750)
                // 30 * (index - 2)
            } else {
                this.scleft = '0'
            }
            this.currentItemData = item
            this.currentItemIndex = index
        },
        // 获取当前使用孩子
        currentChildren() {
            this.$api.currentChildren({}, res => {
                if (res.code == 0 && res.data) {
                    this.currentChildrenData = res.data
                }
            });
        },
        // 获取孩子列表
        getChildren() {
            let _this = this
            this.$api.getChildren({}, res => {
                if (res.code == 0 && res.data.length != 0) {
                    this.childrenList = res.data
                }
            });
        },
        switchChildren(item) {
            this.$api.switchCurrentChildren({ id: item.childrenId }, res => {
                if (res.code == 0) {
                    this.getChildren()
                    this.currentChildren()
                    this.$interactive.toast('设置成功')
                } else {
                    this.$interactive.toast('设置失败')
                }
            });
        },
        subscribeMessage(status) {
            if (status) {
                console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>status', status)
                uni.requestSubscribeMessage({
                    tmplIds: [''],
                    success(res) {
                        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>res', res)
                    },
                    fail(err) {
                        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>err', err)
                    }
                })
            }
        },
        saveImage() {
            let data = "https://bsm-sdn.oss-cn-shenzhen.aliyuncs.com/oss859a8719-215e-b903-ea0b-614d3b421d11.jpg"
            uni.downloadFile({  // 下载
                url: this.isCustomer ? this.currentChildrenData.customerService : data,      // 图片下载地址
                success: res => {
                    console.log('>>>>>>>>>>>>>>>>', res)
                    if (res.statusCode === 200) {
                        uni.saveImageToPhotosAlbum({//保存图片到系统相册。
                            filePath: res.tempFilePath,//图片文件路径
                            success: function () {
                                uni.showToast({
                                    title: '图片保存成功',
                                    icon: 'none',
                                });
                            },
                            fail: function (e) {
                                console.log(e);
                                uni.showToast({
                                    title: '图片保存失败',
                                    icon: 'none',
                                });
                            }
                        });
                    }
                }, fail: err => {
                    console.log('>>>>>>>>>>>>>>>>>>文件下载失败', err)
                }
            });
        },
    }
}
</script>
<style >
.page {
    height: 100%;
    background-color: #f0f2f5;
}
</style>
<style lang="scss" scoped>
@import "@/common/scss/common.scss";
.box2 {
    justify-content: center;
    flex-direction: column;
    align-items: center;

    width: 33%;
}
.box1 {
    padding: 0 rpx;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
.padding_box {
    position: relative;
    padding: 0 30rpx;
    background-color: #f0f2f5;
}
.mine_box {
    height: 360rpx;
    color: #fff;
    background-color: $primarycolor;
    border-radius: 0 0 50rpx 50rpx;
    .avatar-img {
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 100%;
        margin-right: 40rpx;
    }
    .avatar_box {
        position: relative;
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 100%;
        margin-right: 40rpx;
        .avatar-img {
            width: 100%;
            height: 100%;
            /* #ifdef MP-WEIXIN*/
            width: 150rpx;
            height: 150rpx;
            /* #endif */
        }
        .get_user_data {
            z-index: 11;
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    .nick-name-box {
        height: 100%;
        margin-top: 100rpx;
    }
    .user-nickName {
        font-size: 40rpx;
        color: #fff;
        margin-bottom: 20rpx;
    }
    .shiming_box {
        border-radius: 10rpx;
        font-size: 28rpx;
        padding: 10rpx 20rpx;
        background-color: rgba(15, 77, 139, 0.5);
        .icon-shezhi {
            margin-right: 10rpx;
            margin-top: 5rpx;
        }
    }
}

.mine_menu {
    position: relative;
    top: -120rpx;
    border-radius: 32rpx;
    padding: 30rpx;
    background-color: #fff;
    color: #1b1b22;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
    .menu_title {
        font-size: 36rpx;
        font-weight: 700;
        margin-bottom: 30rpx;
    }
    .menu_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .item_box {
            position: relative;
            text-align: center;
            .item_img {
                width: 112rpx;
                height: 112rpx;
            }
            .menu_title {
                font-size: 24rpx;
                color: #333;
            }
        }
    }
}
.mine_menu1 {
    box-shadow: 0px 41rpx 31rpx -27rpx rgba(21, 125, 251, 0.8);
}
.mine_menu + .mine_menu {
    margin-top: 30rpx;
}
.menu_bar_box {
    position: relative;
    top: -120rpx;
    margin-top: 30rpx;
    background-color: #fff;
    border-radius: 32rpx;
    overflow: hidden;
    .mine_item_box {
        position: relative;
        padding: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;
        .item_img {
            width: 56rpx;
            height: 56rpx;
            margin: 4rpx 16rpx 0 0;
        }
        .more_img {
            width: 32rpx;
            height: 32rpx;
        }
    }
    .contact_btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120rpx;
        opacity: 0;
    }
}
.authorize-box {
    background-color: transparent;
    text-align: center;
    .authorize-avatar {
        width: 200rpx;
        height: 200rpx;
    }
    .authorize-btn {
        position: relative;
        top: 40rpx;
    }
}
/deep/.u-mode-center-box {
    background-color: transparent !important;
}
.children_box {
    position: relative;
    box-sizing: border-box;
    top: -120rpx;
    color: #1b1b22;
    margin-bottom: 30rpx;
    // padding-right: 30rpx;
    // white-space: nowrap;
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
    .children_item {
        position: relative;
        flex-shrink: 0;
        // display: inline-block;
        width: 540rpx;
        background-color: #fff;
        padding: 30rpx;
        margin-left: 30rpx;
        border-radius: 32rpx;
        font-size: 28rpx;
        .children_img {
            width: 110rpx;
            height: 110rpx;
            margin-right: 32rpx;
        }
        .title {
            font-size: 36rpx;
        }
        .address_teacher_box {
            font-size: 24rpx;
            margin: 20rpx 0;
            color: #999;
            .line {
                width: 4rpx;
                height: 20rpx;
                margin: 0 16rpx;
                background-color: #e6e6e6;
            }
        }
        .select_box {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            padding: 6rpx 30rpx;
            background-color: #63b9f2;
            border-radius: 0 32rpx 0 32rpx;
        }
        .user_box {
            position: absolute;
            right: 30rpx;
            top: 20rpx;
            padding: 12rpx 22rpx;
            color: #333;
            font-weight: bold;
            font-size: 24rpx;
            background: #f5f5f5;
            border-radius: 16rpx;
        }
    }
}
.customer_box {
    text-align: center;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 32rpx;
    .customer_code {
        width: 400rpx;
        height: 400rpx;
        margin: 30rpx 0 50rpx 0;
    }
}
</style>
<style>
</style>